<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <script src="js/flexible.js"></script>
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body class="index-body">
    <div class="wrap ">
        <img src="images/bg2.jpg" class="bg-img" alt="">
        <div class="upload-box">
            <div class="upload-1" >
                <div class="up1-inner">
                    <div class="up1-main">
                        <div class="up1-tit">
                            <img src="images/up_tit.png" class="img-bg" alt="">
                        </div>
                        <div class="up1-input">
                            <img src="images/up_input.png" class="img-bg" alt="">
                            <input type="file" id="file">
                            <img src="" class="show-img" alt="">
                        </div>
                        <div class="up1-words">
                            <img src="images/up_words.png" class="img-bg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="res-wrap" style="display: none;">
                <div class="result">
                    <div class="r-inner">
                        <div style="width: 7.6rem;margin:0 auto;">
                            <img src="images/res_tit.png" class="img-bg" alt="">
                        </div>
                        <div class="create-img">
                            <img src="images/i_book.png" class="img-bg" alt="">
                        </div>
                        <div class="">
                            <img src="images/res_bottom.png" class="img-bg" alt="">
                        </div>
                    </div>
                </div>
                <div class="res-btn">
                    <p>长按保存图片</p>
                    <div class="btn-wrap clearfix">
                        <div class="btn btn-share fl" style="margin-left: 0.5333rem;">
                            <img src="images/btn_share.png" class="img-bg" alt="">
                        </div>
                        <div class="btn replace-href fr" data-href='./list.html' style="margin-right: 0.5333rem;">
                            <img src="images/more.png" class="img-bg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="mask m-share">
        <img src="images/arr.png" alt="" class="fr" style="width: 2.2133rem;margin:0.2667rem 0.2667rem;">
    </div>

<div class="mask m-load" >
  <div class="m-loading">
    图片正在上传中...
  </div>
</div>
    <script src="js/jQuery.min.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <script src="js/exif.js"></script>
    <script>
    $(function() {

        $('.replace-link').on('click', function() {
            var link = $(this).attr('data-href');
            window.location.replace(link);
        });

        var up_img = {
            init: function() {
                this.input = $('#file');
                this.show_img = $('.show-img');
                this.out_img_string = null;
                this.Orientation = null;
                this.max_size = 3000000;
                this.min_size = 100000;
                this.bindEvent();
            },
            get_Orientation: function(file) {
                var _this = this;
                EXIF.getData(file, function() {
                    //_ImgFile图片数据
                    _this.Orientation = EXIF.getTag(this, 'Orientation');
                });
            },
            create_share_img:function(){
                $('.upload-1').hide();
                $('.res-wrap').show();
                html2canvas($('.r-inner')[0]).then(function(canvas){
                    var img = canvas.toDataURL();
                    $('.r-inner').append('<img src="'+img+'" class="p-100"/>');
                });
            }
            ,
            bindEvent: function() {
                var _this = this;
                this.input.on('change', function() {
                    var file = this.files[0];
                    var reader = new FileReader();
                    var type = file.type;
                    var size = file.size;
                    if (type == 'image/png' || type == 'image/jpg' || type == 'image/jpeg') {} else {
                        alert('图片格式错误,只能上传后缀为.png或.jpg的图片哦~')
                        return false;
                    };
                    if (file.size > _this.max_size) {
                        alert('上传照片过大，请更换照片~');
                        return false;
                    }
                    _this.get_Orientation(file);
                    reader.readAsDataURL(file);
                    reader.onload = function(event) {
                        var result = event.target.result;
                        var image = new Image();
                        var minSize = _this.min_size;
                        var maxSize = _this.max_size;
                        image.src = result;
                        var Orientation = _this.Orientation;
                        image.onload = function() {
                            var cvs = document.createElement('canvas');
                            var ctx = cvs.getContext('2d');
                            var scale = 1; //预留压缩比
                            cvs.width = this.width * scale;
                            cvs.height = this.height * scale; //计算等比缩小后图片宽高
                            if (Orientation && Orientation != 1) {
                                switch (Orientation) {
                                    case 6: // 旋转90度
                                        cvs.width = this.height * scale;
                                        cvs.height = this.width * scale;
                                        ctx.rotate(Math.PI / 2);
                                        // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                        ctx.drawImage(this, 0, -this.height * scale, this.width * scale, this.height * scale);
                                        break;
                                    case 3: // 旋转180度
                                        ctx.rotate(Math.PI);
                                        ctx.drawImage(this, -this.width * scale, -this.height * scale, this.width * scale, this.height * scale);
                                        break;
                                    case 8: // 旋转-90度
                                        cvs.width = this.height * scale;
                                        cvs.height = this.width * scale;
                                        ctx.rotate(3 * Math.PI / 2);
                                        ctx.drawImage(this, -this.width * scale, 0, this.width * scale, this.height * scale);
                                        break;
                                }
                            } else {
                                ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
                            }
                            /* ctx.drawImage(this, 0, 0, cvs.width, cvs.height);*/
                            if (size < maxSize) {
                                _this.out_img_string = cvs.toDataURL(type, 1);
                            } else {
                                //大于压缩临界的，根据原图的大小动态设置压缩比
                                var sca = 1 / (Math.sqrt([size / maxSize])); //
                                _this.out_img_string = cvs.toDataURL(type, sca);
                            }
                            // $('.m-load').show();
                            $('.up1-input .img-bg').css('opacity', 0)
                            _this.show_img.attr('src', _this.out_img_string).show();
                            $('.create-img img').attr('src',_this.out_img_string);
                            _this.out_img_string = _this.out_img_string;
                            // $('.up-input').hide();                   
                            _this.create_share_img();             
                        };

                    };
                    // 调用reader.readAsDataURL()方法，把图片转成base64
                });

                //分享按钮
                $('.btn-share').on('click',function(){
                  
                  $('.m-share').show();
                });
                $('.m-share').on('click',function(){
                  $(this).hide();
                });
                 $('.replace-href').on('click',function(){
                   var link = $(this).attr('data-href');
                    window.location.replace(link);
                 }) ;
            }
        }
        up_img.init();
    });
    </script>
</body>

</html>